<nb-card>
  <nb-card-header>Button Shapes</nb-card-header>
  <nb-card-body>
    <div class="shape-container">
      <div class="container-title">
        <span>Rectangle Button</span>
      </div>
      <div class="subheader">
        <span>Border radius:</span>
        <span>4px</span>
      </div>
      <div>
        <button nbButton shape="rectangle" status="success" class="btn-demo">Rectangle</button>
      </div>
    </div>

    <div class="shape-container">
      <div class="container-title">
        <span>Semi-round Button</span>
      </div>
      <div class="subheader">
        <span>Border radius:</span>
        <span>12px</span>
      </div>
      <div>
        <button nbButton shape="semi-round" status="success" class="btn-demo">Semi-round</button>
      </div>
    </div>

    <div class="shape-container">
      <div class="container-title">
        <span>Rounded Button</span>
      </div>
      <div class="subheader">
        <span>Border radius:</span>
        <span>round</span>
      </div>
      <div>
        <button nbButton shape="round" status="success" class="btn-demo">Round</button>
      </div>
    </div>
  </nb-card-body>
</nb-card>
